<template>
<transition>
  <div class="comments" v-show="isComments">
    <CommentsHeader></CommentsHeader>
    <div class="comments-body">
      <ScrollView>
        <CommentsBody></CommentsBody>
      </ScrollView>
    </div>
  </div>
  </transition>
</template>

<script>
import CommentsHeader from '../components/comments/commentsHeader.vue'
import CommentsBody from '../components/comments/commentsBody.vue'
import { mapGetters } from 'vuex'
import ScrollView from '../components/ScrollView.vue'
export default {
  name: 'Comments',
  components: {
    CommentsHeader,
    CommentsBody,
    ScrollView
  },
  computed: {
    ...mapGetters(['comments', 'isComments'])
  },
  watch: {

  }

}
</script>

<style scoped lang='scss'>
@import "../assets/css/variable";
@import "../assets/css/mixin";
.comments{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    @include bg_sub_color();
    .comments-body{
      position: absolute;
      top: 100px;
      bottom: 0;
      left: 0;
      right: 0;
      overflow: hidden;
    }
}
.v-enter{
  transform: translateX(100%);
}
.v-enter-to{
  transform: translateX(0);
}
.v-enter-active{
  transition: all 0.1s;
}
.v-leave{
  transform: translateX(0);
}
.v-leave-to{
  transform: translateX(100%);
}
.v-leave-active{
  transition: all 0.1s;
}
</style>
